<template>
  <div class="container">
    <div class="register"
         v-if="firstStep">
      <h3>重置密码</h3>
      <ul class="register-list">
        <li>
          <div class="register-list-row">
            <label class="register-row-title"><span style="color:#ff4949">*</span>账号</label>
            <div class="register-row-content">
              <input :readonly="readonlyFlag"
                     placeholder="请输入手机号"
                     v-model="phone"
                     type="text"
                     maxlength="11">
              <i class="fa fa-times-circle "></i>
            </div>
          </div>
        </li>
        <li>
          <div class="register-list-row">
            <label class="register-row-title"><span style="color:#ff4949">*</span>验证码</label>
            <div class="register-row-content">
              <input type="text"
                     placeholder="请输入验证码"
                     v-model="code">
              <i class="fa fa-times-circle "></i>
            </div>
            <button :class="codeDis ? 'verificationing':'verification'"
                    v-bind:disabled="codeDis"
                    @click="sendVerificationCode">{{verificationCode}}</button>
          </div>
        </li>
      </ul>
      <div style="text-align: center;margin-top: 20px;">
        <button class="verification"
                v-if="isShow"
                style="position: relative; width:90px;height: 44px;font-size:15px;"
                @click="resetPwd()">确定</button>
        <router-link :to="{ path: '/login'}"><button class="verification"
                  style="position: relative;width:90px;height: 44px;font-size: 15px;margin-left: 40px;">取消</button></router-link>
      </div>
    </div>
    <div class="register"
         v-if="!firstStep">
      <h3>设置新密码</h3>
      <ul class="register-list">
        <li>
          <div class="register-list-row">
            <label class="register-row-title"><span style="color:#ff4949">*</span>新密码</label>
            <div class="register-row-content">
              <input placeholder="请输入8~20位新密码"
                     v-model="newpwd"
                     type="password"
                     maxlength="20">
              <i class="fa fa-times-circle "></i>
            </div>
          </div>
        </li>
        <li>
          <div class="register-list-row">
            <label class="register-row-title"><span style="color:#ff4949">*</span>确认密码</label>
            <div class="register-row-content">
              <input placeholder="请输入8~20位新密码"
                     v-model="confirmpwd"
                     type="password"
                     maxlength="20">
              <i class="fa fa-times-circle "></i>
            </div>
          </div>
        </li>
      </ul>
      <div style="text-align: center;margin-top: 40px;">
        <p style="font-size:15px;color:#ff8b22">
          <span>密码为长度8-20位的数字、字母、</span><br>
          <span>下划线或常用字符</span>
        </p>
      </div>
      <div style="text-align: center;margin-top: 40px;">
        <button class="verification"
                v-if="isBtnShow"
                style="position: relative; width:90px;height: 44px;font-size:15px;"
                @click="resetByForgetPwd()">确定</button>
        <router-link :to="{ path: '/login'}"><button class="verification"
                  style="position: relative;width:90px;height: 44px;font-size: 15px;margin-left: 40px;">取消</button></router-link>
      </div>
    </div>
  </div>

</template>
<script>
import { MessageBox, Toast } from "mint-ui";
export default {
  components: {
    MessageBox
  },
  data() {
    return {
      verificationCode: "发送验证码",
      timer: 0,
      codeDis: false,
      accountName: "",
      code: "", //验证码
      phone: "", //手机号
      companyCode: "", //公司代码
      isShow: true,
      readonlyFlag: false,
      firstStep: true,
      newpwd: "",
      confirmpwd: "",
      isBtnShow: true
    };
  },
  watch: {
    phone: function (newVal, oldVal) {
      var _self = this;
      var reg = /^[0-9]*$/;
      if (!reg.test(newVal)) {
        _self.phone = oldVal;
      }
      if (newVal == window.sessionStorage.getItem("2_phone")) {
        _self.readonlyFlag = true;
      }
    }
  },
  mounted: function () {
    //初始化数据
    //   this.verificationCodeTimer(true);
  },
  activated: function () {
    //初始化数据
    //    this.verificationCodeTimer(true);
  },
  methods: {
    //发送验证码
    sendVerificationCode: function () {
      var _self = this;
      //验证手机号
      if (!_self.phone) {
        Toast({
          message: "请填写手机号",
          position: "middle"
        });
        return;
      }
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(_self.phone)) {
        Toast({
          message: "手机号码格式错误",
          position: "middle"
        });
        return;
      }
      //设置不能点击
      _self.codeDis = "disabled";
      //设置号码不能编辑
      _self.readonlyFlag = true;
      //将手机号码放入缓存中
      window.sessionStorage.setItem("2_phone", _self.phone);
      var body = {};
      body.params = {
        phone: _self.phone
      };
      //  layer.msg("短信发送成功，请注意查收");
      var url = this.utilHelper.apiUrl + "/api/sendValidateCodeForPwd";
      _self.$http.post(url, body).then((response) => {
        var data = response.body.resData;
        if (data.result == 1) {
          Toast({
            message: "短信发送成功，请注意查收"
          });
          _self.verificationCodeTimer(false);
        } else {
          Toast(data.resultMsg);
          //设置能点击
          _self.codeDis = false;
          //设置号码能编辑
          _self.readonlyFlag = false;
        }
      }),
        (response) => {
          Toast("发送短信异常");
          //设置能点击
          _self.codeDis = false;
          //设置号码能编辑
          _self.readonlyFlag = false;
        };
    },
    //短信验证码定时器
    verificationCodeTimer: function (flag) {
      var _self = this;
      var date = 0;
      if (flag) {
        //页面刷新，或重进入时
        if (window.sessionStorage.getItem("2_verification")) {
          //若缓存中不存在数据则 不进行倒计时
          date = window.sessionStorage.getItem("2_verification");
        } else {
          return;
        }
        if (window.sessionStorage.getItem("2_phone")) {
          //若缓存中存在手机号时，对手机号进行赋值
          _self.phone = window.sessionStorage.getItem("2_phone");
          _self.readonlyFlag = true;
        }
      } else {
        //点击发送按钮时
        date = new Date().getTime() + 1000 * 180;
        window.sessionStorage.setItem("2_verification", date);
        _self.timer = 180;
      }

      _self.codeDis = "disabled";
      var code = setInterval(function () {
        _self.timer = Math.ceil((date - new Date().getTime()) / 1000); //向上取整数
        if (_self.timer <= 0) {
          window.sessionStorage.removeItem("2_verification");
          _self.verificationCode = "发送验证码";
          _self.codeDis = false;
          _self.readonlyFlag = false;
          window.clearInterval(code);
        } else {
          _self.verificationCode = _self.timer + "S";
          _self.timer -= 1;
        }
      }, 1000);
    },
    //重置密码,校验验证码
    resetPwd: function () {
      var _self = this;
      if (_self.vaild()) {
        _self.isShow = false; //隐藏确定按钮
        var body = {};
        body.params = {
          phone: _self.phone,
          code: _self.code
        };
        var url = _self.utilHelper.apiUrl + "/api/resetPwd";
        _self.$http.post(url, body).then((response) => {
          var data = response.body.resData;
          if (data.result == 1) {
            //页面跳转
            //清空倒计时
            window.sessionStorage.removeItem("2_verification");
            window.sessionStorage.removeItem("2_phone");
            _self.firstStep = false;
            Toast({
              message: data.resultMsg,
              position: "middle"
            });
            //    layer.open({
            // 	    content: data.resultMsg
            // 	    ,btn: '确定'
            // 	    ,btn1:function(){
            // 	    	layer.closeAll();
            //             _self.$router.replace({path:'/login'});
            // 	    }
            // 	 });
          } else {
            _self.isShow = true;
            Toast({
              message: data.resultMsg,
              position: "middle"
            });
          }
        }),
          (response) => {
            layer.msg("重置异常");
            _self.isShow = true;
          };
      }
    },
    vaild: function () {
      var _self = this;
      if (!_self.phone) {
        layer.msg("请输入手机号", {
          time: 2000
        });
        return false;
      }
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(_self.phone)) {
        layer.msg("手机号码格式错误", {
          time: 2000
        });
        return false;
      }
      if (!_self.code) {
        layer.msg("请输入验证码", {
          time: 2000
        });
        return false;
      }
      return true;
    },
    //重置密码
    resetByForgetPwd: function () {
      var _self = this;
      if (_self.vaildByForget()) {
        _self.isBtnShow = false; //隐藏确定按钮
        var body = {};
        body.params = {
          phone: _self.phone,
          newPassword: _self.newpwd,
          confirmPassword: _self.confirmpwd
        };
        var url = _self.utilHelper.apiUrl + "/api/resetPwdByForget";
        _self.$http.post(url, body).then((response) => {
          var data = response.body.resData;
          if (data.result == 1) {
            _self.firstStep = true;
            layer.open({
              content: data.resultMsg,
              btn: "确定",
              btn1: function () {
                layer.closeAll();
                _self.$router.replace({ path: "/login" });
              }
            });
          } else {
            _self.isBtnShow = true;
            Toast({
              message: data.resultMsg,
              position: "middle"
            });
          }
        }),
          (response) => {
            layer.msg("重置异常");
            _self.isBtnShow = true;
          };
      }
    },
    vaildByForget: function () {
      var _self = this;
      if (!_self.newpwd) {
        layer.msg("请输入新密码", {
          time: 2000
        });
        return false;
      }
      var reg = /^[a-zA-Z0-9~!@#$%^&*()-_+=`{}\[\]:;"'<>?,.\/\\]{8,20}$/;
      if (!reg.test(_self.newpwd)) {
        layer.msg("密码由长度8-20位的数字、字母、下划线或常用字符组成", {
          time: 3000
        });
        return false;
      }
      if (!_self.confirmpwd) {
        layer.msg("请确认新密码", {
          time: 2000
        });
        return false;
      }
      if (_self.confirmpwd != _self.newpwd) {
        layer.msg("两次密码输入不一致", {
          time: 2000
        });
        return false;
      }
      return true;
    }
  }
};
</script>
<style scoped>
.register {
  padding: 130px 20px 50px;
  height: 100%;
}
.register h3 {
  text-align: center;
  font-size: 20px;
  margin-bottom: 80px;
}
.register-list li {
  border-bottom: 1px solid #ccc;
  padding: 6px 0 6px 16px;
  margin-bottom: 20px;
}
.register-list-row {
  position: relative;
  padding-left: 90px;
  padding-right: 70px;
  height: 24px;
  line-height: 24px;
}
.register-row-title {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  color: #333;
  font-size: 16px;
  text-align: right;
}
.register-row-content {
  position: relative;
}
.register-row-content input {
  height: 24px;
  font-size: 14px;
  background-color: #f2f2f2;
  outline: none;
  padding-right: 30px;
}
.register-row-content .fa {
  position: absolute;
  right: 6px;
  top: 2px;
  font-size: 20px;
  color: #999;
  display: none;
  z-index: 1;
}
.register-row-content .fa-exclamation-circle {
  color: #bf0000;
}
.verification {
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
  height: 24px;
  color: #333;
  font-size: 12px;
  text-align: right;
  background-color: #ff8b22;
  color: #fff;
  text-align: center;
  border-radius: 4px;
}
.verificationing {
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
  height: 24px;
  color: #333;
  font-size: 12px;
  text-align: right;
  color: #ff8b22;
  background-color: #cacaca;
  text-align: center;
  border-radius: 4px;
}
.btn-register {
  display: block;
  width: 100%;
  padding: 12px 0;
  border: 1px solid #ff7900;
  background-color: #f3ece6;
  color: #ff7900;
  margin-top: 50px;
}
</style>
